.login {
  height: auto !important;

  .header {
    .func_height_vw(@base-width, 932);
    background: #fff @login-bg no-repeat center top / 100% auto;
    &::before {
      content: ' ';
      display: block;
      height: percentage(92 / 932);
    }

    .logo {
      width: percentage(345 / @base-width);
      margin: 0 auto;
    }
  }

  .login-form {
    position: relative;
    padding: 1.8em (120vw * 100 / @base-width) 1em;
    .rem(60);
    line-height: 136 / 60;

    .item {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 1.2em;

      &:last-of-type {
        margin-top: 0.5em;
      }

      &.error {
        input[type='text'] {
          border: 1px solid @red;
        }
      }
    }

    .tit {
      flex-shrink: 0;
      width: 2.8em;
    }

    .con {
      flex: 1;
    }

    input[type='text'] {
      width: 100%;
      height: (136em / 60);
      padding: 0 0.5em;
      box-sizing: border-box;
      border: 0;
      background: #e0e0e0;
    }
    input[type='checkbox'] {
      width: 1em;
      height: 1em;
      margin-left: 0.2em;
      margin-right: 0.6em;
      border: 3px solid currentColor;
      border: 0;
    }
    .btn-login {
      display: block;
      width: percentage(508 / @base-width);
      margin: 1em auto 0;
      color: #fff;
      background: @green;
      border: 0;
    }

    .error:not(.item) {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      font-size: 0.825em;
      color: @red;
      text-align: center;

      & + .item {
        margin-top: 0.5em;
      }
    }
  }
}
